<template>
    <view class="pop-pay-way">
        <view class="title"><text>请选择支付方式</text></view>
        <view class="pay-way">
            <view class="pay-way-item" v-for="item in payList" :key="item.ID" @click="select(item)">
                <image class="pay-icon" :src="getIcon(item.PaymentPayWay)"></image>
                <text class="pay-way-text">{{ item.PayName }}</text>
                <text v-if="item.PaymentPayWay == 1 || item.PaymentPayWay == 10">(余额¥{{ item.Balance }})</text>
            </view>
        </view>
        <button class="btn" @click="cancel">取消</button>
    </view>
</template>

<script>
import { sortBykey } from "@/uni-sub-base/utils/utils.js"
export default {
    props: {
        payList: {
            type: Array,
            default: () => [],
        },
        payPrice: {
            type: String,
            default: "",
        },
    },
    data() {
        return {}
    },
    mounted() {
        //支付方式排序
        this.payList = sortBykey(this.payList, "PaymentPayWay")
        this.$forceUpdate()
    },
    methods: {
        select(item) {
            //目前支持 信用 余额 线下
            let canPayWay = item.PaymentPayWay == 0 || item.PaymentPayWay == 1 || item.PaymentPayWay == 10
            if (!canPayWay) {
                this.easyToast("暂不支持该支付方式")
                return
            }
            //检查余额,余额是否够
            if (item.PaymentPayWay == 1 && (item.Balance <= 0 || item.Balance < Number(this.payPrice))) {
                this.easyToast("您的余额不足，请前往充值再提交订单")
                return
            }
            //检查信用余额是否够
            if (item.PaymentPayWay == 10 && (item.Balance <= 0 || item.Balance < Number(this.payPrice))) {
                this.easyToast("您的信用余额不足")
                return
            }
            this.$emit("select", item)
        },
        //取消
        cancel() {
            this.$emit("cancel", "")
        },
        getIcon(id) {
            switch (id) {
                case 0:
                    return "/static/img/offline_pay.png"
                    break
                case 1:
                    return "/static/img/bank/yepay.png"
                    break
                case 10:
                    return "/static/img/bank/bank.png"
                    break
            }
        },
    },
}
</script>

<style lang="scss">
.pay-way {
    padding-left: 20rpx;
    padding-right: 20rpx;
}
.pay-way-text {
    font-size: $font-size-28;
}
</style>
